<template>
  <div class="detail">
    <div class="box1">
    <div class="d_left">
        <div class="pic-box" style="width:2.5rem;height:2.8rem; position:relative;left:.4rem;border:1px solid lightgray;">
            <span ref="img1" style="border:'1px solid red'"><img-zoom :src="require('../../assets/images/carousel1.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel1.png')" :configs="configs"  ></img-zoom></span>
            <span ref="img2" style="display:none"><img-zoom :src="require('../../assets/images/carousel2.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel2.png')" :configs="configs" ></img-zoom></span>
            <span ref="img3" style="display:none"><img-zoom :src="require('../../assets/images/carousel3.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel3.png')" :configs="configs" ></img-zoom></span>
            <span ref="img4" style="display:none"><img-zoom :src="require('../../assets/images/carousel2.png')" alt="12" width="250" height="280" :bigsrc="require('../../assets/images/carousel2.png')" :configs="configs" ></img-zoom></span>

        </div>
        <div class="small_show" >
            <ul>
                <li ref="num" v-for="(item, index) in smalls" :key="index" :class="{active:index == isactive}">
                    <img :src="item.img" @click="adds(index)" ref="son"/>
                </li>
            </ul>
        </div>
    </div>
    <div class="d_right">
      <div class="title">
        <span>新生儿疾病筛查型</span>
        <h6>Neonatal screening type</h6><br/>
        <p class="p1">商品编码 ：{{productId}}</p>
        <p class="p2">商品型号 ：{{marque}}</p>
        <p class="p3">起订量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：100</p>
        <p class="p4">服务&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  ：由里定负责发货，并提供售后服务</p>
      </div>
      <div class="elect">
        <!-- 采血孔： -->
        <div class="hole-item" >
          <div class="cai xie">采血孔&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</div>
          <div class="elent_son" >
            <ul >
              <li class="kong"   v-for="(item, index) in hole" :key="index" :class="{active:index == isgood}" >
                <span @click="holess(index, item.title)" >
                  {{item.title}}
                  </span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 尺寸 -->
        <div class="hole-item">
          <div class="cai cun">尺寸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</div>
          <div class="elent_son sales">
            <ul>
              <li class="sale" v-for="(item, index) in sales" :key="index" :class="{active:index == isbig}">
                <span @click="saless(index, item.sl)">{{item.sl}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 颜色 -->
        <div class="hole-item">
          <div class="cai se">颜色&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</div>
          <div class="elent_son red">
            <ul>
                <li v-for="(item, index) in colors" :key="index" :class="{active:index == isred}">
                    <span @click="colorss(index, item.co)">{{item.co}} </span>
                </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="amount">
          <span>购买数量 &nbsp;：</span>
          <el-input-number class="purchase" v-model="num" @change="handleChange" :min="100"  label="描述文字"></el-input-number>
      </div>
      <div class="jsons">
        <top-bar>
          <button @click="carts" slot="good" class="good" ><img src="../../assets/images/icon_cart_reverse.png"><span>加入购物车</span></button>
        </top-bar>
      </div>
    </div>
  </div>
   <div class="footer">
      <ul>
        <li><router-link to="/" >关于我们</router-link></li>
        <li><router-link to="/shopp">联系我们</router-link></li>
        <li><router-link to="/order">会员介绍</router-link></li>
        <li><router-link to="/order">购物指南</router-link></li>
        <li><router-link to="/order">常见问题</router-link></li>
      </ul>
    </div>
</div>
</template>

<script>
import imgZoom from 'vue2.0-zoom'
import topBar from '../topbar'

export default {
  data () {
    return {
      marque: '153248546',
      productId: '0001',
      isactive: false,
      isgood: false,
      isbig: false,
      isred: false,
      num: 100,
      configs: {
        width: 320,
        height: 300,
        maskWidth: 100,
        maskHeight: 100,
        maskColor: 'red',
        maskOpacity: 0.2
      },
      smalls: [
        {
          img: require('../../assets/images/carousel1.png')
        },
        {
          img: require('../../assets/images/carousel2.png')
        },
        {
          img: require('../../assets/images/carousel3.png')
        },
        {
          img: require('../../assets/images/carousel1.png')
        }
      ],
      hole: [
        {
          title: '无孔'
        },
        {
          title: '二孔'
        },
        {
          title: '三孔'
        },
        {
          title: '四孔'
        },
        {
          title: '五孔'
        }
      ],
      sales: [
        {
          sl: '65mm'
        },
        {
          sl: '70mm'
        },
        {
          sl: '74mm'
        },
        {
          sl: '75mm'
        },
        {
          sl: '80mm'
        },
        {
          sl: '85mm'
        },
        {
          sl: '90mm'
        },
        {
          sl: '105mm'
        },
        {
          sl: '50mm'
        },
        {
          sl: '97mm'
        }
      ],
      colors: [
        {
          co: '白色'
        },
        {
          co: '黄色'
        },
        {
          co: '红色'
        },
        {
          co: '绿色'
        },
        {
          co: '蓝色'
        }
      ]
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    holess (index, title) {
      this.isgood = index
      console.log('item', title)
      console.log('holes', this.isgood)
    },
    saless (index, sl) {
      this.isbig = index
      console.log('sl', sl)
      console.log('saless', this.isbig)
    },
    colorss (index, co) {
      this.isred = index
      console.log('co', co)
      console.log('coloes', this.isred)
    },
    carts () {
      if (!this.num) {
        console.log('ccc', this.num)
        this.$message({
          message: '请选择完整内容',
          duration: 1000
        })
      }
    },
    adds (index) {
      this.isactive = index

      // var style = document.getElementById('num')
      // var y = document.documentElement.clientHeight || document.body.clientHeight
      // let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

      // console.log('y', y)
      // console.log('h', h)

      if (this.isactive === 0) {
        this.$refs.img1.style.display = 'block'
        this.$refs.img2.style.display = 'none'
        this.$refs.img3.style.display = 'none'
        this.$refs.img4.style.display = 'none'
      } else if (this.isactive === 1) {
        this.$refs.img2.style.display = 'block'
        this.$refs.img1.style.display = 'none'
        this.$refs.img3.style.display = 'none'
        this.$refs.img4.style.display = 'none'
      } else if (this.isactive === 2) {
        this.$refs.img3.style.display = 'block'
        this.$refs.img1.style.display = 'none'
        this.$refs.img2.style.display = 'none'
        this.$refs.img4.style.display = 'none'
      } else {
        this.$refs.img4.style.display = 'block'
        this.$refs.img1.style.display = 'none'
        this.$refs.img2.style.display = 'none'
        this.$refs.img3.style.display = 'none'
      }
      console.log('isa', this.isactive)
    }
  },
  components: {
    imgZoom,
    topBar
  }
}
</script>

<style scoped lang="less">
*{
  margin:0;
  padding:0
}

.detail{
  position: relative;
  top:1.8rem;
  width:100%;
  height:100%;
  .box1{
    width:100%;
    min-height: 8rem;
    position: relative;
    // background: red
  }
  .d_left{
    width:3.3rem;
    height:5rem;
    float:left;
    margin-left:.35rem;
    // background: pink;
    .big_show{
      width:80%;
      height:3rem;
      margin:0 auto;
      border: 1px solid red;
      img{
        width:80%;
        height:2.5rem;
      }
    }
    .small_show{
      position: relative;
      width:80%;
      height:1rem;
      margin:.2rem auto 0;
      // border:1px solid green;
      overflow-x: scroll;
      overflow-y: hidden;
      ul{
        width:5rem;
        height:.9rem;
        display: inline-block;
        overflow: hidden;
        li{
          position: relative;
          left:0;
          float:left;
          margin:0 .12rem 0 .12rem;
          width:.7rem;
          height:.7rem;
          line-height: .7rem;
          list-style: none;
          overflow: hidden;
          &.active{
            border:2px solid rgb(107, 36, 102) ;
          }
          img{
            width:.7rem;
            height:.7rem;
          }
        }
      }
    }
  }
  .d_right{
    width:75%;
    height:5rem;
    position: absolute;
    left:3.8rem;
    // background: gray;
    .title{
      width:100%;
      height:2.6rem;
      font-size: .25rem;
      position: relative;
      // border:1px solid red;
      span{
        height: 0.5rem;
        line-height: .5rem;
        position: absolute;
        left:.7rem;
        font-size: .3rem;
        letter-spacing: 3px;
        color:rgb(107, 36, 102);
        // border:1px solid pink;
      }
      h6{
        height:.3rem;
        line-height: .3rem;
        position: absolute;
        left:.7rem;
        top:.6rem;
        font-size: .2rem;
        color:rgb(107, 36, 102);
        // border:1px solid yellow;
        }
        .p1{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:1rem;
        }
        .p2{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:1.4rem;
        }
        .p3{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:1.8rem;
        }
        .p4{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:2.2rem;
        }
    }
    .elect{
      width:100%;
      position: relative;
      top:-.3rem;
      .hole-item{
        font-size: .2rem;
        // background: red;
        margin-left:.6rem;
        color:#6f7697;
        .elent_son{
          margin-left:1.2rem;
        }
        .sales{
          width:80%;
          background: yellow;
        }
        .cai{
          width:1.2rem;
          margin-top:.2rem;
          // background: green;
        }
        .xie{
          position: relative;
          top:.3rem;
        }
        .cun{
          position: relative;
          top:.3rem;
        }
        .se{
          position: relative;
          top:.3rem;
        }
        li{
          float:left;
          position: relative;
          width:.57rem;
          color:black;
          list-style: none;
          margin:.05rem .1rem;
          padding:.05rem .1rem;
          border:1px solid black;
          cursor: pointer;
          border-radius: .08rem;
          &.active{
            background: rgb(107, 36, 102);
            color:white;
          }
        }
      }
    }
     .amount{
        position: relative;
        top:.5rem;
        left:0.6rem;
        color:#6f7697;
        font-size: .2rem;
        span{
          position: absolute;
          left:0
        }
        .purchase{
          position: absolute;
          left:1.3rem;
          outline: 0
        }
      }
      .jsons{
        width:40%;
        height:.7rem;
        // border:1px solid red;
        position: relative;
        top:1.5rem;
        left:.1rem;
        button{
          width:2.5rem;
          height:.65rem;
          background: rgb(107, 36, 102);
          border-radius: .1rem;
          border:none;
          outline: 0;
          cursor: pointer;
          position: relative;
          top:-1.2rem;
          img{
            position: relative;
            left:-.2rem;
          }
          span{
            position: relative;
            top:-.089rem;
            box-shadow: bisque;
            font-size: .2rem;
            color:white
          }
        }
      }
  }

}
.footer{
    width:100%;
    height:.6rem;
    font-size: .2rem;
    // background: green;
    border-top:1px solid lightgray;
    li{
      width:20%;
      height:.6rem;
      line-height: .6rem;
      float:left;
      list-style: none;
      color: #6e769a;
      a{
        text-decoration: none;
        color: black;

      }
    }
  }

</style>
